<script lang="ts" setup>
import { copyTextToClipboard } from '@/hooks/web/useCopyToClipboard'
import { message, Modal as AModal } from 'ant-design-vue'

function copy() {
  if (copyTextToClipboard('https://github.com')) {
    message.success('Copy Success')
  }
}
</script>
<template>
  <a-modal width="360px" :footer="false" v-bind="$attrs">
    <div class="s-logo">
      <img src="@/assets/logo/logo.png" />
    </div>
    <div class="qr">
      <img
        src=""
        alt=""
      />
    </div>
    <div class="text">xxx</div>
    <div class="text">xxx xxx xxx</div>
    <div class="btn-wrap">
      <a-button @click="copy" type="primary" class="!block w-full" shape="round"
        >COPY</a-button
      >
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.s-logo {
  padding-top: 20px;

  img {
    width: 100px;
    margin: 0 auto;
  }
}

.qr {
  // text-align: center;

  padding: 10px 0 5px;

  img {
    width: 200px;
    margin: 0 auto;
  }
}

.text {
  padding-top: 5px;
  text-align: center;
}

.btn-wrap {
  text-align: center;
  padding-top: 15px;
}
</style>
